<template>
    <div class="single-component">
        <a-modal v-model:visible="modalVisibale" title="忘记密码" @ok="handleOk" width="30vw" style="top: 18vh">
            <div>
                <a-input v-model:value="formState.inputPhoneValue" placeholder="请输入手机号" show-count :maxlength="11">
                    <template #prefix>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shoujihao"></use>
                        </svg>
                    </template>
                </a-input>
            </div>

            <div class="margin-top_20">
                <a-input v-model:value="formState.inputPhoneMarkValue" placeholder="请输入手机验证码">
                    <template #prefix>
                        <svg v-if="state.isGetConfirm" class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yanzhengma2"></use>
                        </svg>
                        <svg v-else class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yanzhengma1"></use>
                        </svg>
                    </template>
                    <template #suffix>
                        <a-button class="confimBtn" @click="getConfirmMark" type="primary">获取验证码</a-button>
                    </template>
                </a-input>
            </div>

            <div class="margin-top_20">
                <a-input-password v-model:value="formState.inputPwdValue" placeholder="请输入密码">
                    <template #prefix>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-mima"></use>
                        </svg>
                    </template>
                </a-input-password>
            </div>

            <div class="margin-top_20">
                <a-input-password v-model:value="formState.inputConfirmPwdValue" placeholder="确认密码">
                    <template #prefix>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-mima"></use>
                        </svg>
                    </template>
                </a-input-password>
            </div>
        </a-modal>
    </div>
</template>
<script lang="ts">
export default {
    name: 'LoginForgetPwd'
}
</script>
<script lang="ts" setup>
import { message } from 'ant-design-vue';
import { ref, inject, reactive } from 'vue';
const { modalVisibale, updateModalVisiable } = inject('LoginModalProvide') as any;

const formState = reactive({
    inputPhoneValue: '',
    inputPhoneMarkValue: '',
    inputPwdValue: '',
    inputConfirmPwdValue: ''
})

const state = reactive({
    isGetConfirm: false,
})
const checkInputValue = () => {
    if (formState.inputPhoneValue.length == 0 || formState.inputPhoneValue.trim() == '') {
        message.warn("手机号不能为空");
        return false;
    }
    if (formState.inputPhoneMarkValue.length == 0 || formState.inputPhoneMarkValue.trim() == '') {
        message.warn("手机验证码不能为空");
        return false;
    }
    if (formState.inputPwdValue.length == 0 || formState.inputPwdValue.trim() == '') {
        message.warn("新密码不能为空");
        return false;
    }
    if (formState.inputPhoneValue.trim() != formState.inputConfirmPwdValue.trim()) {
        message.warn("两次输入密码不一致，请检查");
        return false;
    }
    return true;
}
const handleOk = () => {
    if (checkInputValue()) {
        // 修改密码
        updateModalVisiable();
    }
}
const getConfirmMark = () => {
    state.isGetConfirm = !state.isGetConfirm;
}
</script>
<style lang="less" scoped>
.single-component {}

.icon {
    font-size: 20px;
    // color: blue;
}

.confimBtn {
    border-radius: 5px;
}
</style>


<style lang="less" scoped>
@import "@/style/page.less";
</style>
